<template>
  <a-drawer
    v-model:visible="state.logVisible"
     width="64%"
    title="构建日志"
    placement="right"
    @close = "logClose"
  >
    <div class="log-box">
      <span>日志追踪</span>&nbsp;
      <a-switch v-model:checked="state.logTrack" @change="trackLogChange"/>
    </div>
    <pre v-html="state.log" id="logId"></pre>
  </a-drawer>
</template>



<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { moduleBuildApi, moduleBuildNoloadingApi, moduleRunApi } from "@/api/devcloudApi";

export default defineComponent({
  name: "buildLog",
  components: {},
  props: {
  },
  emits: ["loadAllLog"],
  setup(props, ctx) {
    const buildMap = new Map()
    let currBuildId = ''

    const state = reactive({
      logTrack: true,
      logVisible: false,
      log: '',
    });
    
    const appendLogTask = async (buildInfo:any) => {
      if(buildInfo.isStop){
        return
      }
      const res = await moduleBuildNoloadingApi.log(buildInfo.id, buildInfo.offset)
      if(res.success){
        if (res.result) {
          buildInfo.log = buildInfo.log + res.result.log
          if(currBuildId === buildInfo.id){
            state.log = buildInfo.log
            trackLog(buildInfo.logTrack)
          }
          if (res.result.hasMore) {
            buildInfo.offset = res.result.bufferSize;
          }else{
            // 加载完成索引日志
            buildInfo.isStop = true
            ctx.emit("loadAllLog", buildInfo.id, res.result.result)
            return
          }
        }
      }
      window.setTimeout(()=>{appendLogTask(buildInfo)}, 2000)
    }

    /**
     * 添加监控日志
     */
    const addMonitorLog = async (buildId:string, isShowLog:boolean) => {
      let buildInfo = buildMap.get(buildId)
      if(buildInfo){
        if(isShowLog){
          showLog(buildInfo)
        }
        return
      }
      buildInfo = {
        id: buildId,
        isStop: false,
        offset: 0,
        logTrack: true,
        log: "start build ......\r\n"
      }
      buildMap.set(buildId, buildInfo)
      appendLogTask(buildInfo)
      if(isShowLog){
        showLog(buildInfo)
      }
    }

    /**
     * 添加最终日志
     */
    const addDetailLog = async (buildId:string) => {
      let buildInfo = buildMap.get(buildId)
      if(buildInfo){
        if(buildInfo.isStop){
          showLog(buildInfo)
          return
        }
      }else{
        buildInfo = {
          id: buildId,
          isStop: true,
          offset: 0,
          logTrack: false,
          log: ''
        }
      }
      if(await getLog(buildInfo)){
        buildMap.set(buildId, buildInfo)
      }
      showLog(buildInfo)
    }

    const showLog = (buildInfo:any)=>{
      currBuildId = buildInfo.id
      state.log = buildInfo.log
      state.logTrack = buildInfo.logTrack
      state.logVisible = true
    }


    const getLog = async (buildInfo:any):Promise<boolean> => {
      const res = await moduleBuildApi.log(buildInfo.id)
      if (res.success) {
        buildInfo.isStop = true
        buildInfo.log = res.result.log
        return true
      }
      return false
    }

    const trackLog = (track:boolean) => {
      if(!track){
        return
      }
      const logId = document.getElementById('logId')
      if(!logId){
        return
      }
      window.setTimeout(() => {logId.scrollTop = logId.scrollHeight}, 10)
      
    }

    const trackLogChange = () => {
      let buildInfo = buildMap.get(currBuildId)
      if(buildInfo){
        buildInfo.logTrack = state.logTrack
      }
      trackLog(state.logTrack)
    }

    
    const logClose = () => {
    }

    return {
      state,
      showLog,
      logClose,
      trackLogChange,
      addMonitorLog,
      addDetailLog,
    }
  },
});
</script>

<style lang="less" scoped>
.box {
  margin: 0 20px;
}

.log-box{
  text-align:right;
  padding: 0 20px;
}

pre {
    background: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 15px 10px;
    font-size: 12px;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    *white-space: normal !important;
    height: 80vh !important;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 10px;
    
}
</style>